import Link from 'next/link';
import { notFound } from 'next/navigation';
import { requireAdmin } from '@/lib/admin/auth';
import { connectorDetail } from '@/lib/admin/queries';
import { connectorAction, updateConnectorConfig } from '@/lib/admin/actions';
import { AdminShell, ActionButton, StatusPill, Kpi, fmtTs, n } from '@/components/admin/shell';
import { HealthLabel, SourceLogo, Progress, Chip, Json } from '@/components/admin/connector-bits';
import { Table, th, td, tdNum } from '@/components/ui/primitives';

export default async function ConnectorInspectPage({ params }: { params: Promise<{ id: string }> }) {
  await requireAdmin();
  const { id } = await params;
  const d = await connectorDetail(id);
  if (!d) notFound();
  const c = d.connector;
  const health = (d.health?.health ?? {}) as Record<string, unknown>;
  const outputs = (d.outputs ?? {}) as Record<string, unknown>;
  const meta = (c.meta ?? {}) as Record<string, unknown>;
  const activeBackfill = d.backfills.find((b) => b.status === 'running' || b.status === 'paused');
  const fieldStats = d.fieldStats as Array<{ field: string; day: string; total: number; nulls: number }>;
  const today = new Date().toISOString().slice(0, 10);
  const nullRates = Object.values(
    fieldStats.reduce<Record<string, { field: string; today: [number, number]; base: [number, number] }>>((acc, r) => {
      const e = (acc[r.field] ??= { field: r.field, today: [0, 0], base: [0, 0] });
      const t = r.day === today ? e.today : e.base;
      t[0] += Number(r.total);
      t[1] += Number(r.nulls);
      return acc;
    }, {}),
  );
  const actions = [
    ['probe', 'Test', 'neutral'],
    ['run', 'Run now', 'neutral'],
    ['backfill', activeBackfill ? 'Continue backfill' : 'Backfill', 'neutral'],
    ...(activeBackfill?.status === 'running' ? [['backfill_pause', 'Pause backfill', 'neutral']] : []),
    ...(activeBackfill ? [['backfill_reset', 'Reset backfill', 'danger']] : []),
    ['retry', 'Retry from cursor', 'neutral'],
    c.status === 'active' ? ['pause', 'Pause', 'danger'] : ['resume', 'Resume', 'primary'],
    c.status === 'maintenance' ? ['resume', 'End maintenance', 'primary'] : ['maintenance', 'Maintenance', 'neutral'],
  ] as const;
  return (
    <AdminShell
      current="/admin/connectors"
      title={String(c.display_name)}
      subtitle={
        <>
          <SourceLogo domain={String(meta.domain ?? '')} name={String(c.display_name)} /> {String(c.id)} · source <span className="font-mono">{String(c.source_id)}</span> · {String(meta.domain ?? '')} · {String(meta.country ?? (c.regions as string[])?.[0] ?? 'global')} · {(c.engine_priority as string[]).join(' → ')} · {String(meta.acquisitionMethod ?? '')} · categories {(c.categories as string[]).join(', ')} · <Link href="/admin/connectors" className="underline">back</Link>
        </>
      }
      actions={
        <div className="flex flex-wrap gap-1">
          {actions.map(([a, label, tone]) => (
            <form key={a} action={connectorAction}>
              <input type="hidden" name="id" value={String(c.id)} />
              <input type="hidden" name="action" value={a} />
              <ActionButton label={label} small={false} tone={tone as 'neutral' | 'danger' | 'primary'} />
            </form>
          ))}
        </div>
      }
    >
      <div className="mb-3 flex flex-wrap gap-1">
        {((meta.capabilities as string[]) ?? []).map((cap) => (
          <Chip key={cap} tone="index">{cap}</Chip>
        ))}
        {((meta.requires as string[]) ?? []).map((r) => (
          <Chip key={r} tone="alert">requires {r}</Chip>
        ))}
        <Chip>refresh {String(meta.refreshClass ?? '')} · {n(c.refresh_frequency_minutes)} min</Chip>
        <Chip>history {String(meta.historicalDepth ?? 'none')}</Chip>
        {meta.termsUrl ? (
          <a href={String(meta.termsUrl)} target="_blank" rel="noreferrer noopener" className="text-[10px] underline text-subtle">terms</a>
        ) : null}
      </div>
      <div className="grid grid-cols-2 gap-3 md:grid-cols-4 xl:grid-cols-6">
        <Kpi label="Status" value={<StatusPill status={String(c.status)} />} sub={<>health <HealthLabel status={(d.health?.status as string) ?? 'unknown'} /></>} />
        <Kpi label="Success 24h" value={health.success_rate_24h != null ? `${Math.round(Number(health.success_rate_24h) * 100)}%` : '—'} sub={`${n(health.pages_success)}/${n(health.pages_attempted)} pages`} />
        <Kpi label="Firecrawl / Scrapfly" value={`${health.firecrawl_success_rate != null ? Math.round(Number(health.firecrawl_success_rate) * 100) + '%' : '—'} / ${health.scrapfly_fallback_rate != null ? Math.round(Number(health.scrapfly_fallback_rate) * 100) + '%' : '—'}`} sub="success / fallback share" />
        <Kpi label="Parse failures" value={health.parse_failure_rate != null ? `${(Number(health.parse_failure_rate) * 100).toFixed(1)}%` : '—'} sub={`${n(health.duplicates_24h)} duplicates 24h`} />
        <Kpi label="Outputs" value={`${n(outputs.sales)} sales`} sub={`${n(outputs.listings)} listings · ${n(outputs.observations)} observations`} />
        <Kpi label="Last success" value={fmtTs(c.last_success_at).slice(0, 16)} sub={`next ${fmtTs(c.next_run_at).slice(0, 16)} · fresh ${health.data_freshness ? fmtTs(health.data_freshness).slice(0, 10) : '—'}`} />
        <Kpi label="Requests 24h" value={n(health.requests_24h)} sub={`${health.latency_ms_avg != null ? n(health.latency_ms_avg) + ' ms avg' : '—'} · ${n(health.challenges_24h)} challenges · ${n(health.rate_limited_24h)}× 429`} tone={Number(health.challenges_24h) > 0 ? 'alert' : undefined} />
        <Kpi label="HTTP errors 24h" value={Object.entries((health.http_errors as Record<string, number>) ?? {}).map(([k, v]) => `${k}×${v}`).join(' ') || '0'} sub={`${n(health.circuit_refusals_24h)} refused by circuit`} tone={Object.keys((health.http_errors as Record<string, number>) ?? {}).length ? 'loss' : undefined} />
        <Kpi label="Volume baseline" value={health.records_7d_daily_avg != null ? `${n(health.records_7d_daily_avg)}/day` : '—'} sub={`${n(health.records_24h)} raw in 24h`} tone={((health.anomalies as string[]) ?? []).some((a) => a.startsWith('result_count_collapse')) ? 'alert' : undefined} />
        <Kpi label="Certificates" value={n(outputs.certificates)} sub="cert numbers seen via this source" />
      </div>

      {activeBackfill || d.backfills.length ? (
        <section className="card mt-6">
          <header className="border-b border-border px-4 py-2.5"><h2 className="text-sm font-semibold">Historical backfill campaigns</h2></header>
          <Table>
            <thead><tr><th className={th}>Started</th><th className={th}>Status</th><th className={th}>Progress</th><th className={`${th} text-right`}>Pages</th><th className={`${th} text-right`}>Items</th><th className={th}>Reached date</th><th className={`${th} text-right`}>Runs</th><th className={`${th} text-right`}>Errors</th><th className={th}>Last cursor</th><th className={th}>Last error</th></tr></thead>
            <tbody>
              {d.backfills.map((b) => (
                <tr key={String(b.id)}>
                  <td className={td}>{fmtTs(b.started_at)}</td>
                  <td className={td}><StatusPill status={String(b.status)} /></td>
                  <td className={td}><Progress percent={b.percent as number | null} status={String(b.status)} /></td>
                  <td className={tdNum}>{n(b.pages_processed)}{b.total_pages ? ` / ${n(b.total_pages)}` : ''}</td>
                  <td className={tdNum}>{n(b.items_processed)}</td>
                  <td className={td}>{b.reached_date ? String(b.reached_date) : '—'}</td>
                  <td className={tdNum}>{n(b.runs)}</td>
                  <td className={tdNum}>{n(b.errors)}</td>
                  <td className={`${td} max-w-[260px] truncate font-mono text-[10px]`} title={JSON.stringify(b.last_cursor)}>{JSON.stringify(b.last_cursor)}</td>
                  <td className={`${td} max-w-[220px] truncate text-loss`} title={String(b.last_error ?? '')}>{String(b.last_error ?? '')}</td>
                </tr>
              ))}
            </tbody>
          </Table>
        </section>
      ) : null}

      {nullRates.length ? (
        <section className="card mt-6">
          <header className="border-b border-border px-4 py-2.5"><h2 className="text-sm font-semibold">Field presence (schema-drift monitor)</h2></header>
          <div className="grid grid-cols-2 gap-x-6 gap-y-1 px-4 py-3 text-xs md:grid-cols-4 xl:grid-cols-6">
            {nullRates.map((f) => {
              const tRate = f.today[0] ? f.today[1] / f.today[0] : null;
              const bRate = f.base[0] ? f.base[1] / f.base[0] : null;
              const drift = tRate !== null && bRate !== null && tRate - bRate >= 0.3;
              return (
                <div key={f.field} className={drift ? 'text-alert' : ''}>
                  <span className="font-mono">{f.field}</span> <span className="text-subtle">null today {tRate === null ? '—' : `${Math.round(tRate * 100)}%`} · 7d {bRate === null ? '—' : `${Math.round(bRate * 100)}%`}</span>
                </div>
              );
            })}
          </div>
        </section>
      ) : null}

      {d.anomalies.length ? (
        <section className="card mt-6">
          <header className="border-b border-border px-4 py-2.5"><h2 className="text-sm font-semibold text-alert">Anomalies (recent runs)</h2></header>
          <ul className="divide-y divide-border px-4 text-xs">{d.anomalies.map((a, i) => <li key={i} className="py-1.5 font-mono">{a}</li>)}</ul>
        </section>
      ) : null}

      <section className="card mt-6">
        <header className="border-b border-border px-4 py-2.5"><h2 className="text-sm font-semibold">Runs</h2></header>
        <Table>
          <thead><tr><th className={th}>Started</th><th className={th}>Status</th><th className={th}>Trigger</th><th className={`${th} text-right`}>Pages</th><th className={`${th} text-right`}>Raw</th><th className={`${th} text-right`}>Norm.</th><th className={`${th} text-right`}>Dup.</th><th className={`${th} text-right`}>Rej.</th><th className={`${th} text-right`}>Credits</th><th className={th}>Engines</th><th className={th}>Error</th></tr></thead>
          <tbody>
            {d.runs.length === 0 ? <tr><td className={td} colSpan={11}><span className="text-subtle">No runs yet.</span></td></tr> : null}
            {d.runs.map((r) => (
              <tr key={String(r.id)}>
                <td className={td}>{fmtTs(r.started_at)}<div className="text-[10px] text-subtle">{r.finished_at ? `${Math.round((new Date(String(r.finished_at)).getTime() - new Date(String(r.started_at)).getTime()) / 1000)} s` : 'running'}</div></td>
                <td className={td}><StatusPill status={String(r.status)} /></td>
                <td className={td}>{String(r.trigger)}</td>
                <td className={tdNum}>{n(r.pages_success)}/{n(r.pages_attempted)}</td>
                <td className={tdNum}>{n(r.records_raw)}</td>
                <td className={tdNum}>{n(r.records_normalized)}</td>
                <td className={tdNum}>{n(r.records_duplicate)}</td>
                <td className={tdNum}>{n(r.records_rejected)}</td>
                <td className={tdNum}>{n(r.cost_credits, 1)}</td>
                <td className={`${td} font-mono text-[10px]`}>{Object.entries((r.engine_stats ?? {}) as Record<string, { attempts: number; success: number }>).map(([k, v]) => `${k} ${v.success}/${v.attempts}`).join(' · ')}</td>
                <td className={`${td} max-w-[260px] truncate text-loss`} title={String(r.error ?? '')}>{r.error ? String(r.error) : ''}</td>
              </tr>
            ))}
          </tbody>
        </Table>
      </section>

      <div className="mt-6 grid gap-6 lg:grid-cols-2">
        <section className="card">
          <header className="border-b border-border px-4 py-2.5"><h2 className="text-sm font-semibold">Raw records (latest)</h2></header>
          <ul className="divide-y divide-border text-xs">
            {d.rawSample.length === 0 ? <li className="px-4 py-3 text-subtle">None yet.</li> : null}
            {d.rawSample.map((r) => (
              <li key={String(r.id)} className="px-4 py-2">
                <div className="flex items-center justify-between gap-2"><span className="font-mono text-[11px]">{String(r.kind)} · {String(r.engine)} · {String(r.http_status ?? '')}</span><span className="text-subtle">{fmtTs(r.fetched_at)}</span></div>
                <a href={String(r.url)} target="_blank" rel="noreferrer noopener" className="block truncate text-muted hover:text-fg">{String(r.url)}</a>
                <div className="flex items-center justify-between">
                  {r.process_error ? <p className="text-loss">{String(r.process_error)}</p> : <p className="text-[10px] text-subtle">{r.processed_at ? `processed ${fmtTs(r.processed_at)}` : 'unprocessed'}</p>}
                  <Link href={`/admin/connectors/${String(c.id)}/raw/${String(r.id)}`} className="text-[10px] underline">view payload</Link>
                </div>
              </li>
            ))}
          </ul>
        </section>
        <section className="card">
          <header className="flex items-center justify-between border-b border-border px-4 py-2.5"><h2 className="text-sm font-semibold">Normalized records (latest)</h2><span className="text-[11px] text-muted">{d.normalized.map((x) => `${x.status} ${n(x.n)}`).join(' · ')}</span></header>
          <ul className="divide-y divide-border text-xs">
            {d.normalizedSample.length === 0 ? <li className="px-4 py-3 text-subtle">None yet.</li> : null}
            {d.normalizedSample.map((r) => (
              <li key={String(r.id)} className="px-4 py-2">
                <div className="flex items-center justify-between gap-2"><span className="truncate">{String(r.raw_title ?? '')}</span><StatusPill status={String(r.status)} /></div>
                <div className="flex items-center justify-between">
                  <p className="text-[10px] text-subtle">{String(r.kind)} · {r.price ? `${String(r.price)} ${String(r.currency ?? '')}` : ''} · {r.match_method ? `${String(r.match_method)} ${r.match_confidence ? Math.round(Number(r.match_confidence) * 100) + '%' : ''}` : ''} {r.reject_reason ? `· ${String(r.reject_reason)}` : ''}</p>
                  <Link href={`/admin/connectors/${String(c.id)}/record/${String(r.id)}`} className="text-[10px] underline">view record</Link>
                </div>
              </li>
            ))}
          </ul>
        </section>
      </div>

      <div className="mt-6 grid gap-6 lg:grid-cols-2">
        <section className="card">
          <header className="border-b border-border px-4 py-2.5"><h2 className="text-sm font-semibold">Costs (30d)</h2></header>
          <Table>
            <thead><tr><th className={th}>Day</th><th className={th}>Kind</th><th className={`${th} text-right`}>Credits</th><th className={`${th} text-right`}>USD est.</th></tr></thead>
            <tbody>
              {d.costs.length === 0 ? <tr><td className={td} colSpan={4}><span className="text-subtle">No cost events.</span></td></tr> : null}
              {d.costs.map((r, i) => <tr key={i}><td className={td}>{String(r.day)}</td><td className={td}>{String(r.kind)}</td><td className={tdNum}>{n(r.credits, 1)}</td><td className={tdNum}>${n(r.usd, 3)}</td></tr>)}
            </tbody>
          </Table>
        </section>
        <section className="card">
          <header className="border-b border-border px-4 py-2.5"><h2 className="text-sm font-semibold">Mapping & schedule</h2></header>
          <form action={updateConnectorConfig} className="space-y-3 p-4 text-xs">
            <input type="hidden" name="id" value={String(c.id)} />
            <div className="grid grid-cols-2 gap-3">
              <label className="block text-muted">Refresh (minutes)<input name="refresh" type="number" min={5} defaultValue={Number(c.refresh_frequency_minutes)} className="mt-1 w-full rounded-md border border-border bg-sunken px-2 py-1.5 text-sm" /></label>
              <label className="block text-muted">Priority
                <select name="priority" defaultValue={String(c.priority)} className="mt-1 w-full rounded-md border border-border bg-sunken px-2 py-1.5 text-sm"><option value="high">high</option><option value="medium">medium</option><option value="low">low</option></select>
              </label>
            </div>
            <label className="block text-muted">Config JSON (seeds, mappings, selectors — connector-specific)
              <textarea name="config" rows={10} defaultValue={JSON.stringify(c.config ?? {}, null, 2)} className="mt-1 w-full rounded-md border border-border bg-sunken px-2 py-1.5 font-mono text-[11px]" />
            </label>
            <div className="flex items-center justify-between"><span className="text-subtle">schema v{String(c.schema_version)} · connector v{String(c.connector_version)} · source trust {d.source ? Math.round(Number(d.source.trust_score) * 100) + '%' : '—'}</span><ActionButton label="Save mapping" small={false} tone="primary" /></div>
          </form>
        </section>
      </div>

      <section className="card mt-6">
        <header className="border-b border-border px-4 py-2.5"><h2 className="text-sm font-semibold">Access & compliance notes (meta.json)</h2></header>
        <div className="px-4 py-3 text-xs leading-relaxed text-muted">{String(meta.accessNotes ?? 'No accessNotes recorded — add them to meta.json (SPEC §36).')}</div>
        <details className="border-t border-border px-4 py-2 text-xs"><summary className="cursor-pointer text-subtle">registry entry</summary><Json value={meta} className="mt-2" /></details>
      </section>
    </AdminShell>
  );
}